<template>
  <div class="suggestion">
    <div class="suggestion-content suggestion-form" id="vippreviewcontent">
      <h4 class="text-center" style="margin: 40px 0;">意见反馈</h4>
      <p>欢迎广大用户向我们反馈对地信产品及网站的意见和建议，有助于我们及时发现问题和解决问题，优化产品功能和使用体验。</p>
      <div class="mb-3" :class="{'validate-err': errors.has('suggestion')}">
        <label>问题描述（请您详细说明遇到的情况，200个汉字以内）：</label>
        <el-input
          v-validate="'required|min:4|max:200'"
          name="suggestion"
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="model.content">
        </el-input>
      </div>
      <label>上传图片（最多五张，请点击增加）：</label>
      <file-upload
        ref="upload"
        :is-display="true"
        list-type="picture-card"
        :limit="5"
        accept="image/*, .jpg, .png, .jpeg"
        v-model="model.picture"
        name="photo"
        init-name="gerentouxiang.png"
      >
        <i class="el-icon-plus"></i>
      </file-upload>
    </div>
    <div class="tc" style="margin-top: 40px;">
      <el-button type="success" round class="width-200" @click="confirm()">
        <span style="font-size: 18px;">提交</span>
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'suggestion',
  title: '意见建议',
  data() {
    return {
      model: {
        content: '', // 反馈内容 ,
        picture: [], // 附属图片 ,
        
        
      }
    }
  },
  methods: {
    confirm () {
      if (!this.isLogin) {
        this.$openLogin()
        return
      }
      
      this.$validator.validate().then(result => {       
        if (result) {
          let fixedInfo = {
            contact:  this.$store.state.user.user.userDetails.phone, // 联系方式 ,
            userId: this.$store.state.user.user.user.userId, // 用户id ,
            userName: this.$store.state.user.user.user.username, // 用户名
            machineType: this.$getBrowserEdition(), // 机型型号/浏览器名称与版本 ,
            system: 'WEB', // 所属系统：WEB / APP ,
            systemVersion: '1.0.6', // 当前系统/软件版本 ,
          }
          this.model.picture = JSON.stringify(this.model.picture)
          axios.post('/mscs/opinion/createOpinion', Object.assign(this.model, fixedInfo)).then(res => {
            if (res.data.code === 1) {
              this.$message({
                showClose: true,
                message: '提交成功，我们会尽快处理，谢谢您的建议',
                type: 'success'
              })
              // 清空内容
              this.model.content= ''
              this.$refs.upload.clearFiles()
              // 重置验证器
              this.$validator.reset()
            } else {
              this.$codeError(res)
            }
          }).catch(error => {
            this.$catchError(error)
          })
        } else {
          this.$message({
            showClose: true, 
            message: '请描述您所遇到的问题，字数控制在4-200字之间',
            type: 'warning'
          })
        }
      })
    }
  },
  computed: {
    isLogin () {
      return this.$store.state.user.isLogin
    }
  },
}
</script>
<style>
  .suggestion {
    background: #F2F6EB;
    color: #333333;
    padding: 40px 0;
  }
  .suggestion-content {
    width: 800px;
    margin: auto;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px 70px;
    box-shadow: #cccccc 0px 0px 2px 2px;
  }
  .suggestion .el-upload-list--picture-card .el-upload-list__item, .suggestion .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  .suggestion .el-upload-list--picture-card .el-upload-list__item-status-label {
    right: -12px;
    top: -5px;
    width: 35px;
    height: 20px;
  }
  .suggestion .el-upload-list--picture-card .el-upload-list__item .el-icon-check, 
  .suggestion .el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
    position: absolute;
    top: -3px;
    right: 12px;
  }
  .suggestion-form p {
    font-size: 12px;
  }
  .suggestion-form label {
    font-size: 14px;
  }
  .form-item {
    display: flex;
    align-items: center;
  }
  .form-item label {
    word-break: keep-all;
    margin-right: 10px;
  }
  
</style>
